<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    {% load static%}
    <link rel="stylesheet" type="text/css" href="{% static 'css/2.css' %}"/>
    <script type="text/javascript" src="{% static 'jquery/jquery-3.2.1.min.js' %}"></script>
    <script type="text/javascript" src="{% static 'jquery/jquery.cookie.js' %}"></script>
    <script type="text/javascript" src="{% static 'js/1.js' %}"></script>
    <script>
        $(document).ready(function(){
            $("#picFile").change(function(){
                console.log("文件域组件的内容发生了变化");
                // 使用Ajax实现文件上传操作
                // 创建一个FormData对象，用于存放上传图片的数据
                var form_data = new FormData();
                // 读取上传图片的数据
                var file_info = $("#picFile")[0].files[0];
                // 将读取到的二进制数据添加到formData对象中
                form_data.append("file", file_info);
                // 使用Ajax发送异步请求并携带请求数据
                $.ajax({
                    async: true,
                    url: "/login/ajax/",
                    type: "post",
                    headers: {"X-CSRFToken":$.cookie("csrftoken")},
                    data: form_data,
                    processData: false,
                    contentType: false,
                    success: function(data){
                        console.log("服务器Response：" + data);
                        // 获取图片元素修改其src属性值
                        $("#photo").attr("src", data);
                        // 分割用户头像的url地址
                        var head = data.split("/")[3];
                        console.log("用户头像文件名称：" + head);
                        // 将用户头像图片名称添加到隐藏域组件中
                        $("#head").attr("value", head);
                    }
                });
            });
        });
    $("document").ready(function(){            
        $("#validateUnique").click(function(){
            document.getElementById("success_msg").style.display = "none";
            //或：$(#"success_msg").style.display="none";
            document.getElementById("error_msg").style.display = "none";
            // 获取文本框的值
            number = $("#number").val();
            // 判断用户名是是否为空
            if(number == "" || number.length == 0){
                // 报错提示
                document.getElementById("error_msg").innerText = "用户名称不能为空";
                return
            }
            console.log(number);
            $.ajax({
                async: true, // 开启异步通信（默认值为true）
                url: "/login/unique/" + number, // ajax请求路径
                type: "post",  // ajax请求方法
                headers:{"X-CSRFToken":$.cookie("csrftoken")}, // 获取cookies中的csrftoken一并提交服务器
                success: function(data){
                    console.log(data); // 测试输出
                    if(data == "True"){
                        document.getElementById("success_msg").innerText = "用户名称可用";
                        document.getElementById("success_msg").style.display = "block";
                        document.getElementById("error_msg").style.display = "none";
                    }else{
                        document.getElementById("error_msg").innerText = "用户名称已经存在";
                        document.getElementById("error_msg").style.display = "block";
                        document.getElementById("success_msg").style.display = "none";
                    }
                },
            });
        });
    });
    $("document").ready(function(){            
        $("#yznr").click(function(){
            document.getElementById("yznr_msg").style.display = "none";
            //或：$(#"success_msg").style.display="none";
            document.getElementById("yzm_msg").style.display = "none";
            // 获取文本框的值
            yz = $("#yz").val();
            // 判断用户名是是否为空
            if(yz == "" || yz.length == 0){
                // 报错提示
                document.getElementById("yzm_msg").innerText = "验证码不能为空";
                return
            }
            console.log(yz);
            $.ajax({
                async: true, // 开启异步通信（默认值为true）
                url: "/login/und/" + yz, // ajax请求路径
                type: "POST",  // ajax请求方法
                headers:{"X-CSRFToken":$.cookie("csrftoken")}, // 获取cookies中的csrftoken一并提交服务器
                success: function(data){
                    console.log(data); // 测试输出
                    if(data == "True"){
                        document.getElementById("yznr_msg").innerText = "验证通过";
                        document.getElementById("abcde").innerText = "注册";
                        document.getElementById("abcde").style.display = "block";
                        document.getElementById("yznr_msg").style.display = "block";
                        document.getElementById("yzm_msg").style.display = "none";
                    }else{
                        document.getElementById("yzm_msg").innerText = "验证码错误";
                        document.getElementById("yzm_msg").style.display = "block";
                        document.getElementById("yznr_msg").style.display = "none";
                    }
                },
            });
        });
    });
    $("document").ready(function(){            
        $("#yzxx").click(function(){
            document.getElementById("aa").style.display = "none";
            //或：$(#"success_msg").style.display="none";
            document.getElementById("bb").style.display = "none";
            // 获取文本框的值
            yx = $("#yx").val();
            // 判断用户名是是否为空
            if(yx == "" || yx.length == 0){
                // 报错提示
                document.getElementById("bb").innerText = "验证码不能为空";
                return
            }
            console.log(yx);
            $.ajax({
                async: true, // 开启异步通信（默认值为true）
                url: "/login/aa/" + yx, // ajax请求路径
                type: "post",  // ajax请求方法
                headers:{"X-CSRFToken":$.cookie("csrftoken")}, // 获取cookies中的csrftoken一并提交服务器
                success: function(data){
                    console.log(data); // 测试输出
                    if(data == "True"){
                        document.getElementById("aa").innerText = "发送成功";
                        document.getElementById("aa").style.display = "block";
                        document.getElementById("bb").style.display = "none";
                    }else{
                        document.getElementById("bb").innerText = "发送失败";
                        document.getElementById("bb").style.display = "block";
                        document.getElementById("aa").style.display = "none";
                    }
                },
            });
        });
    });
    </script>
</head>
<body bgcolor="mediumblue" text="red" background="{% static 'image/t01d61356d326bd0f99.jpg' %}">
    <div class="container-fluid">
        <div class="row-fluid">
            <div class="span4">
            </div>
            <div class="span5">
                <h3>
                    <strong>注册</strong>
                    <kbd>
                        register
                    </kbd>
                </h3>
            </div>
            <div class="span3">
            </div>
        </div>
        <div class="row-fluid">
            <div class="span2">
            </div>
            <div class="span7">
                <form class="form-horizontal"  id="updateDeptFrom" name="updateDeptFrom" method="POST" action="/login/register/" onSubmit="return checkPassword();" >
                    {% csrf_token %}
                    
                    <div class="control-group">
                            <label class="control-label" for="number">登录账号</label>
                        <div class="controls">
                            <input id="number" type="text" placeholder="请输入邮箱地址或手机号" name="number" required />
                            <a id="validateUnique" href="#">唯一验证</a>
                        </div>
                    </div>

                    <div class="control-group">
                            <label class="control-label" >登录密码</label>
                           <div class="controls">
                               <input id="code" type="password" name="code" placeholder="请输入不少于6位的字符"  required />
                               <label id="errMsg1" class="errMsg"></label>                                                                
                            </div>
                    </div>
                    <div class="control-group">
                            <label class="control-label" >确认密码</label>
                           <div class="controls">
                               <input id="code1" type="password"  name="code1"  placeholder="两次密码一致" required />
                               <label id="errMsg2" class="errMsg"></label>
                            </div>
                    </div>
                    <div class="control-group">
                        <label class="control-label" for="number">qq邮箱</label>
                        <div class="controls">
                            <input id="yx" type="text" placeholder="请输入qq邮箱" name="yx" required />
                            <a id="yzxx" href="#">发送验证码</a>
                        </div>
                    </div>
                    <div class="control-group">
                        <label class="control-label" for="number">验证码</label>
                        <div class="controls">
                            <input id="yz" type="text" placeholder="请输入验证码" name="yz" required />
                            <a id="yznr" href="#">确认验证</a>
                            
                        </div>
                    </div>
                    <div class="control-group">
                            <label class="control-label" for="number">用户昵称</label>
                        <div class="controls">
                            <input id="name" type="text" placeholder="请输入不少于6位的字符" name="name" required />
                        </div>
                    </div>
                    
                    <div class="control-group">
                            <label class="control-label" for="number" style="margin-top: 10px;">用户头像</label>
                            
                        <div class="controls">
                            
                            <img height="105px" width="105px" id="photo" src="{% static 'image/31987cc2-67ce-11e8-a370-00e07063c956.png' %}"/>
                            <input type="file" id="picFile" name="picFile" style="margin-top: 10px;" required/><br/>
                            <input type="hidden" id="head" name="head"/>
                        </div>
                    </div>
                    <div class="control-group">
                        <label class="control-label" for="number">用户性别</label>
                        <div class="controls">
                            <input id="gender" name="gender" type="radio" class="input" value="男" checked="checked"/>男
                            <input id="gender" name="gender" type="radio" class="input" value="女"/>女
                        </div>
                    </div>
                    <div class="control-group">
                            <label class="control-label" for="number"> <span>所在城市</span></label>
                        <div class="controls">
                            <input id="city" type="text" placeholder="请输入所在城市" name="city" required />		
                        </div>
                    </div>
                    <div class="control-group">
                            <label class="control-label" for="number">个性签名</label>
                        <div class="controls">
                            <input id="signature" type="text" placeholder="请输入不大于30个字" name="signature"  />
                        </div>
                    </div>
                    
                    <div class="control-group">
                            <div class="controls">
                            
                            <label id="success_msg" class="success_msg"></label>
                            <label id="error_msg" class="error_msg"></label>
                            <label id="yznr_msg" class="yznr_msg" ></label>
                            <label id="yzm_msg" class="yzm_msg"></label>
                            <label id="aa" class="aa"></label>
                            <label id="bb" class="bb"></label>
                            <button type="submit" id="abcde" class="btn"> </button>&emsp;&emsp;&emsp;<button type="submit" class="btn"  ormaction="login/templates/index.html">返回登录</button><br/>

                        </div>
                    </div>
                    
                </form>
            </div>
            <div class="span3">
            </div>
        </div>
    </div>
</body>
</html>
